<template>
  <div class="card">
    <a-form-model layout="inline">
      <a-form-model-item>
        <a-select allowClear v-model="platform" style="width: 150px">
          <a-select-option v-for="(item, index) in platforms" :key="index" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-select allowClear v-model="app_type" style="width: 150px">
          <a-select-option v-for="(item, index) in appTypes" :key="index" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="getDataList">查询</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button @click=";(app_type = ''), (platform = ''), getDataList">重置</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item v-for="item in appTypes" :key="item.id">{{ item.name }}</a-menu-item>
          </a-menu>
          <a-button type="primary">发布新版</a-button>
        </a-dropdown>
      </a-form-model-item>
    </a-form-model>

    <a-spin :spinning="loading">
      <a-table
        bordered
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change=";(pagination = $event), getDataList()"
      >
        <template slot="status" slot-scope="text">
          <a-tag color="blue" v-if="text == 0">App安装包</a-tag>
          <a-tag color="blue" v-if="text == 1">wgt资源包</a-tag>
        </template>
        <template slot="platform" slot-scope="text">
          <div v-if="text == 1">安卓</div>
          <div v-if="text == 2">苹果</div>
          <div v-if="text == 0">
            <span>苹果</span>
            <br />
            <span>安卓</span>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-button type="primary" size="small" @click="edit(record)">修改</a-button>
          <a-button type="primary" size="small" @click="del(record.id)">删除</a-button>
        </template>
      </a-table>
    </a-spin>
    <upVersion ref="upVersions" :platforms="platforms" @upload="getDataList"></upVersion>
  </div>
</template>

<script>
import { getAppVersionApi, delListAPI } from '@/api/system.js'
import upVersion from './diogla/upVersion.vue'
export default {
  name: 'appMyRate',
  components: {
    upVersion
  },
  data() {
    return {
      loading: false,
      app_type: '',
      platform: '',
      platforms: [
        { id: 1, name: '安卓' },
        { id: 2, name: '苹果' }
      ],
      appTypes: [
        { id: '1', name: 'wgt资源包' },
        { id: '0', name: 'App安装包' }
      ],
      tableData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 50
      },
      columns: [
        {
          title: '品牌',
          dataIndex: 'brand_name',
          align: 'center'
        },
        {
          title: '标题',
          dataIndex: 'title',
          align: 'center'
        },
        {
          title: '安装包类型',
          dataIndex: 'app_type',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '平台',
          dataIndex: 'platform',
          align: 'center',
          scopedSlots: { customRender: 'platform' }
        },
        {
          title: '应用版本名称',
          dataIndex: 'show_version',
          align: 'center'
        },
        {
          title: '应用版本号',
          dataIndex: 'version',
          align: 'center'
        },
        {
          title: '上传时间',
          dataIndex: 'ctime',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  created() {
    this.getDataList()
  },
  computed: {},
  methods: {
    async del(id) {
      this.$confirm({
        title: '确认删除吗?',
        onOk: async () => {
          try {
            await delListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: id })
            this.$message.success('操作成功')
            this.getDataList()
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    edit(record) {
      console.log(record)
      this.$refs.upVersions.openupVersionDiogla(2, record)
    },
    handleMenuClick(e) {
      console.log('click', e)
      this.$refs.upVersions.openupVersionDiogla(e.key, {})
    },

    async getDataList() {
      this.loading = true
      this.selectedArrIds = []
      try {
        var json = {
          page: this.pagination.current,
          page_size: this.pagination.pageSize,
          brand_id: process.env.VUE_APP_BRAND_ID,
          search: {
            app_type: this.app_type,
            platform: this.platform
          }
        }
        const { data } = await getAppVersionApi(json)
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
</style>
